<template>
  <el-dialog title="提示"
             :visible="visible"
             append-to-body
             width="30%"
             @close="continueCreate">
    <el-form label-width="120px"
             class="demo-ruleForm"
             style="margin-top: 20px">
      <div class="flex-center">
        <icon-svg class-name="iconClass wh64"
                  icon-name="chengse" />
      </div>
      <p style="text-align: center">{{ succeseTips }}</p>
      <el-form-item>
        <el-button type="primary"
                   plain
                   @click="orderPrint">打印订单</el-button>
        <el-button type="primary"
                   plain
                   @click="toDetail">查看订单</el-button>
        <el-button type="danger"
                   plain
                   @click="continueCreate">继续创建</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  name: "OrderCompleteDialog",
  props: {
    visible: Boolean,
    orderId: [String, Number],
    succeseTips: String
  },
  data () {
    return {
      time: 8
    };
  },
  methods: {
    orderPrint () {
      const { href } = this.$router.resolve({
        name: "OrderPrint",
        query: {
          orderId: this.orderId,
          status: this.status
        }
      });
      window.open(href, "_blank");
    },
    toDetail () {
      const { href } = this.$router.resolve({
        name: "orderDetailsWindow",
        query: {
          orderId: this.orderId
        }
      });
      this.continueCreate();
      window.open(href, "_blank");
    },
    continueCreate () {
      // 去除路由参数
      let url = window.location.href; //获取当前页面的url
      if (url.indexOf("?") != -1) { //判断是否存在参数
        url = url.replace(/(\?|#)[^'"]*/, '');  //去除参数
        window.history.pushState({}, 0, url);
      }
      this.$router.push({ query: {} })
      // window.location.reload()
      this.$emit("initActive", 0);
      this.cancel();
    },
    cancel () {
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style scoped>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wh64 {
  width: 64px;
  height: 64px;
}
</style>
